import React from 'react'
import { Button, Input, Row, Col, Form } from 'antd'
import ScanSnap from 'components/scan-snap'

export default {
  key: 'scan-snap',
  name: 'ScanSnap 扫描仪',
  author: '张然',
  description: '富士通扫描仪，只有在安装了官方驱动的windows电脑上可以使用，调试请配置好环境。',
  isExampleFull: false,
  api: [
    {
      title: 'API',
      data: [{
        param: 'text', description: '按钮文字。', type: 'string|ReactNode', defaultValue: '-'
      }, {
        param: 'onScan', description: '每次扫描成功后的回调，会返回扫描成功图片的::base64::。', type: 'function(image)', defaultValue: '-'
      }],
      description: '在使用前可以使用系统::store::内的::main.enableScan::进行判断系统是否可以使用扫描仪，::1::为可以使用，::0::为检查中，::-1::为不可使用。'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '只在配置了扫描仪环境的机器上可用。',
      state: {
        imageList: []
      },
      getMethod: context => {
        return {
          onScan: image => {
            const { imageList }  = context.state;
            imageList.push(`data:image/bmp;base64,${image}`);
            console.log(imageList);
            context.setState({ imageList });
          }
        }
      },
      getContent: context => {
        const { imageList } = context.state;
        const { enableScan } = context.props;
        return enableScan === 1 ? (
          <div>
            <ScanSnap onScan={context.onScan}>扫描</ScanSnap>
            <div style={{ marginTop: 20 }}>
              {imageList.map((image, index) => <img
                key={index}
                src={image}
                style={{ width: 200, height: 200, display: 'block', marginTop: 10 }}
              />)}
            </div>
          </div>
        ) : (
          enableScan === 0 ? '检查中' : '您的系统暂不支持使用扫描仪'
        )
      }
    }
  ]
}
